<template>
	<view>
		<u-swiper :list="slides" name="img_url" height="350"></u-swiper>
		<view class="u-text-center u-m-t-20">
			<u-tabs bar-width="100" item-width="180" :list="listTabs" :current="current" @change="changeSort"></u-tabs>
		</view>
		<u-row gutter="16"  class="u-skeleton">
			<u-col span="6" v-for="(goods,index) in goodsList" :key="index">
			<goods-card :goods="goods"></goods-card>
			</u-col>
		</u-row>
		<!-- 骨架屏 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
  export default {
		data() {
			return {
				listTabs: [
					{name: '默认'},
					{name: '销量'},
					{name: '推荐'},
					{name: '最新'},
				],
				current:0,
				slides:[],
				goodsList:[{},{},{},{},{}],
				page:1,
				loading:false
			}
		},
		onLoad() {
		/* const res = await this.$u.patch('/api/orders/1/confirm')
		console.log(res) 
		const res = await this.$u.api.index()
		console.log(res, 'reaaaaaaa')
		
		// 测试登录
		const data= {
			email:'super@a.com',
			password:'123123'
		}
		const res1 = await this.$u.api.authLogin(data)
		console.log(res1, 'reaaaaaaa')
		console.log(this.vuex_version,'vuex_version')
		this.$u.vuex('vuex_name','1552')
		console.log(this.vuex_name)
		*/
		/* this.$u.api.index().then( res =>{
			console.log(res,'shouye')
			this.slides = res.slides
			this.goods = res.goods.data
			// 以上简写
			const res = await this.$u.api.index()
			this.slides = res.slides
			this.goods = res.goods.data
		}) */
		this.getData()
		// 测试代码
		// this.$u.utils.isLogin()
		/*const currentPages = getCurrentPages().pop()
		console.log(currentPages,'currentPages')
		 const options = currentPages.options
		const optionsKeys = Object.keys(options)
		let params = ''
		if(optionsKeys.length !== 0){
			// 遍历
			params = optionsKeys.reduce((pre,current)=>{
			 return pre + current + '=' + options[current] + '&'
			}, '?').slice(0,-1)
		}
		console.log(params,'参数') */

		
		},
		methods: {
			changeSort(index) {
				this.current = index;
				// 清空商品 否则 分页时数据没有变化
				this.goodsList=[{},{},{},{},{}]
				this.page=1
				this.getData()
			},
			// 获取数据
			async getData(){
				this.loading = true // 显示骨架屏
				const params = {
					page: this.page
				}
				// 增加排序条件
				if(this.current ==1 )params.sales=1
				if(this.current ==2 )params.recommend=2
				if(this.current ==3 )params.new=3
				
				const res = await this.$u.api.index(params)
				// console.log(res, '首页res')
				this.loading = false
				this.slides = res.slides
				/*this.goods =res.goods.data
					因为分页 不能直接赋值 会覆盖数据
				*/
				this.goodsList = this.goodsList.pop().title ? [...this.goodsList,...res.goods.data]:res.goods.data
			}
		},
		// 分页
		onReachBottom(){
			// 重新请求数据
			this.page = this.page + 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
